<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>table功能测试(mylayui)</title>
  <link rel="stylesheet" href="../src/css/layui.css" media="all">
  <style>
    body {
      margin: 10px;
      /*border: 4px solid green;*/
    }
  </style>
</head>
<!--<body class="layui-container">-->
<body>
<div class="layui-container">
  <a class="layui-btn layui-btn-warm" lay-active="getValue" style="margin-bottom: 10px;">获得表格的数据（form.val）</a>
  <form class="layui-form" lay-filter="form1" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">输入框</label>
      <div class="layui-input-block">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
               class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码框</label>
      <div class="layui-input-inline">
        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
               class="layui-input">
      </div>
      <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">选择框</label>
      <div class="layui-input-block">
        <select class="test" name="city" lay-verify="required" onchange="alert('我是节点上的事件')">
          <option value=""></option>
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">定时刷新</label>
      <div class="layui-input-inline">
        <select name="joke" id="select1">
          <option value=""></option>
          <option value="0" selected>北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
        </select>
      </div>
      <div class="layui-form-mid layui-word-aux">我是一个调皮的select，我<input type="checkbox" name="trouble" lay-skin="switch"
                                                                       lay-text="不捣乱|捣乱" checked></div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">复选框</label>
      <div class="layui-input-block">
        <input class="test" type="checkbox" name="like[write]" title="写作">
        <input class="test" type="checkbox" name="like[read]" title="阅读" checked>
        <input class="test" type="checkbox" name="like[dai]" title="发呆">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">开关</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" lay-skin="switch" lay-filter="switchDemo">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">单选框</label>
      <div class="layui-input-block">
        <input class="test" type="radio" name="sex" value="男" title="男">
        <input class="test" type="radio" name="sex" value="女" title="女" checked>
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">文本域</label>
      <div class="layui-input-block">
        <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>

<script src="../src/layui.js"></script>
<!--<script src="layui/release/zip/layui-v2.4.5/layui/layui.all.js"></script>-->
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
  layui.config({base: 'js/'})
    .use(['form', 'common'], function () {
      var $ = layui.$,
        util = layui.util,
        form = layui.form;

      form.on('submit(formDemo)', function (data) {
        layer.alert('data: ' + JSON.stringify(data.field));
        return false;
      });

      $('select.test').append('<option value="火星">火星</option>');
      $('.test:checkbox').last().prop('checked', true);
      $('.test:radio').first().prop('checked', true);
      // form.render();
      form.render($('.test'));

      setInterval(function () {
        var elemTrouble = $('#select1');
        elemTrouble.val((elemTrouble.val() - -1) % 5);
        if ($('input[name="trouble"]').prop('checked')) {
          // 只刷新当前的节点，不会影响其他的表单元素
          form.render(elemTrouble);
        } else {
          form.render('select', 'form1');
        }
      }, 1000);

      //处理属性 为 lay-active 的所有元素事件
      util.event('lay-active', {
        getValue: function () {
          alert('测试直接取form的值'); // 顺带测试了一下util.event, 发现目前版本有个bug: 多次执行util.event会导致事件多次绑定（已在util模块修复）
        },
        test: function () {
          console.log('do something');
        }
      });

      util.event('lay-active', {
        getValue: function () {
          var elem = $(this);
          // var data = form.val(elem.next('form')); // 可以是一个jqueyr对象
          var data = form.val(elem.next('form').attr('lay-filter')); // 也可以是一个lay-filter的值
          layer.alert('data: ' + JSON.stringify(data));
        }
      });

      $('select[name="city"]').change(function () {
        alert('修改了城市');
      });

      $('input:radio').change(function () {
        alert('单选切换了: ' + this.value);
      });

      $('input:checkbox').change(function () {
        alert('多选/开关切换了: ' + this.checked + '，值：' + this.value + '，标题：' + this.title);
      });

      // 在beforeSwitch中返回false可以阻止当次操作
      form.on('beforeSwitch(switchDemo)', function (data) {
        if (Math.random() > 0.5) {
          layer.msg('随机数大于0.5，取消当前的开关操作!', {anim: 6, time: 1500});
          return false;
        }
      });

      form.on('beforeSwitch()', function (data) {
        // 每个开关都会进入的事件，而且如果存在母(父)事件，会先调用，在调用对应的子事件
        return confirm('确定' + (this.checked ? '关掉' : '打开') + '这个开关');
      });

    });
</script>
</body>
</html>
